<template>
  <div>
    <h1>Home</h1>
    <!-- 
      router-link 三种写法
     -->
    <router-link :to="{ name: 'news' }">新闻</router-link>
    <!-- params传参 -->
    <!-- <router-link to="/home/music/1">音乐1</router-link>
    <router-link to='/home/music/2/3min' >音乐2</router-link> -->
    <router-link :to="{ name: 'music', params: { id: '1', time: undefined } }"
      >音乐1</router-link
    >
    <router-link :to="{ name: 'music', params: { id: '2', time: '3min' } }"
      >音乐2</router-link
    >
    <!-- query传参 -->
    <router-link
      :to="{ path: '/home/game', query: { tit: '暴力摩托', version: '2007' } }"
      >游戏3</router-link
    >
    <router-link to="/home/game/?tit=qq飞车&&version=2018">游戏4</router-link>

    <!-- <router-link :to='{path:"/home/music"}'>音乐</router-link>
    <router-link :to='{path:"/home/news"}'>新闻</router-link> -->

    <!-- <router-link to='/home/music'>音乐</router-link>
    <router-link to='/home/news'>新闻</router-link> -->
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  beforeCreate() {
    console.log("--beforeCreate--");
  },
  created() {
    console.log("--created--");
  },
  beforeMount() {
    console.log("--beforeMount--");
  },
  mounted() {
    console.log("--mounted--");
  },
  beforeDestroy() {
    console.log("--beforeDestroy--");
  },
  destroyed() {
    console.log("--destroyed--");
  },
};
</script>

<style>
</style>